<template>
  <div class="image-upload">
    <!--
        1  list-type: picture-card 指定列表形式
        2  file-list: 指定列表数据
        3  action:   指定文件上传时的后端的接口地址 该项目将数据提交到腾讯中,不用配    暂时写#

        4  on-preview:  设置预览属性
        5  limit:       限制上传的数据的个数
        6  on-remove:   删除时的事件
        7  http-request 覆盖默认的上传行为，可以自定义上传的实现
        8  on-change    添加文件  文件上传成功 失败
        9  before-upload   上传前的限制
     -->
    <el-upload
      :class="{disabled:fileComputed}"
      list-type="picture-card"
      :file-list="fileList"
      action="#"
      :on-preview="handlePreview"
      :limit="limit"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :on-change="handleChange"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>

    <!-- 预览弹出框 -->
    <el-dialog width="500px" title="预览图片" :visible="showDialog" @close="showDialog = false">
      <img :src="previewImg" alt="" style="width:100%">
    </el-dialog>
  </div>

</template>

<script>
// SecretId: AKIDuc4F9nBH7i13oJXUAZhY7PRCgGchU0FD
// SecretKey: jBMHvHNDm45qLYU9XeU2KL5YjeIflbAS
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)
const cos = new COS({
  SecretId: 'AKIDuc4F9nBH7i13oJXUAZhY7PRCgGchU0FD', // 身份识别ID
  SecretKey: 'jBMHvHNDm45qLYU9XeU2KL5YjeIflbAS' // 身份秘钥
})

export default {
  name: 'ImageUpload',
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      showDialog: false,
      fileList: [],
      previewImg: ''

    }
  },
  computed: {
    fileComputed() {
      return this.fileList.length >= this.limit
    },
    isAllUploadSuccess() {
      return this.fileList.every(item => item.status === 'success')
    }
  },
  methods: {
    // 处理预览
    handlePreview(file) {
    //   console.log('预览了', file)
      this.previewImg = file.url
      this.showDialog = true
    },
    // 删除文件实现数据同步
    handleRemove(file, fileList) {
      // file:          删除的文件
      // fileList:      结构中的fileList
      // this.fileList  数据中的fileList
      // console.log(file, fileList, this.fileList)

      //   方案一:
      //   this.fileList = [...fileList]
      //   方案二:
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
    },
    // 添加文件实现数据同步
    handleChange(file, fileList) {
    //   console.log(file, fileList)
      this.fileList = [...fileList]
    },
    // 上传前的文件限制
    beforeUpload(file) {
    //   图片大小要小于 2M
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      return true
    },
    // 上传文件
    handleUpload(obj) {
    //   console.log(obj.file)
      cos.putObject({
        Bucket: 'hrsaas-1306928155',
        Region: 'ap-beijing',
        Key: parseInt(Math.random() * 10000) + '-' + obj.file.name,
        StorageClass: 'STANDARD',
        Body: obj.file,
        onProgress: (progressData) => {
        //   console.log(JSON.stringify(progressData))
          const img = this.fileList.find(item => item.uid === obj.file.uid)
          img.status = 'uploading'
          img.percentage = parseInt(progressData.percent * 100)
        }
      }, (err, data) => {
        if (err) {
          console.log(err)
          return
        }

        const img = this.fileList.find(item => item.uid === obj.file.uid)

        setTimeout(() => {
          img.status = 'success'
          img.url = 'https://' + data.Location
        }, 1000)
      })
    }

  }
}
</script>

<style scoped lang='scss'>
.image-upload{
    ::v-deep {
        .disabled {
            .el-upload--picture-card{
                display:none
            }
        }
    }
}
</style>
